<template>
  <div id="app">
    <!-- 测试通过 data 属性赋值 -->
    <GCardList 
      :data="testData" 
      :show-search-form="true" 
      :show-pagination="true"
      :fixed-search-form="false"
      @update:data="handleDataUpdate">
      <template #page-header>
        <h3 style="text-align: center; margin: 0; padding: 10px 0;">G-Card-List 组件测试示例</h3>
      </template>
      <!-- 自定义搜索表单 -->
      <template #search-form="{ queryData, handleQuery, resetQuery }">
        <el-form :model="queryData" :inline="true" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="queryData.name" placeholder="请输入姓名" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="queryData.department" placeholder="请选择部门" clearable style="width: 200px;">
              <el-option label="技术部" value="技术部" />
              <el-option label="销售部" value="销售部" />
              <el-option label="市场部" value="市场部" />
              <el-option label="人事部" value="人事部" />
              <el-option label="财务部" value="财务部" />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: auto;">
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      
      <!-- 自定义卡片头部 -->
      <template #card-header="{ item }">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <strong>{{ item.name }}</strong>
          <el-tag :type="item.status === '在职' ? 'success' : (item.status === '离职' ? 'danger' : 'warning')">{{ item.status }}</el-tag>
        </div>
      </template>
      
      <!-- 自定义卡片主体 -->
      <template #card-body="{ item }">
        <div style="padding: 10px 0;">
          <p><i class="el-icon-user"></i> 部门: {{ item.department }}</p>
          <p><i class="el-icon-message"></i> 邮箱: {{ item.email }}</p>
          <p><i class="el-icon-phone"></i> 电话: {{ item.phone }}</p>
          <p><i class="el-icon-location"></i> 地址: {{ item.address }}</p>
        </div>
      </template>
      
      <!-- 自定义卡片底部 -->
      <template #card-footer="{ item }">
        <div style="text-align: right;">
          <el-button size="small" type="primary" @click="console.log(item);">编辑</el-button>
          <el-button size="small" @click="console.log(item);">详情</el-button>
        </div>
      </template>
    </GCardList>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import GCardList from './components/g-card-list.vue'

// 生成测试数据
const generateTestData = () => {
  const departments = ['技术部', '销售部', '市场部', '人事部', '财务部']
  const statuses = ['在职', '离职', '实习']
  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', 
                '郑一', '王二', '冯三', '陈四', '褚五', '卫六', '蒋七', '沈八']
  
  const testData = []
  
  for (let i = 1; i <= 50; i++) {
    const name = names[i % names.length] + i;//(i > names.length ? Math.ceil(i / names.length) : '')
    const department = departments[Math.floor(Math.random() * departments.length)]
    const status = statuses[Math.floor(Math.random() * statuses.length)]
    
    testData.push({
      id: i,
      name: name,
      department: department,
      email: `${name.toLowerCase().replace(/\s+/g, '')}@example.com`,
      phone: `138${String(i).padStart(8, '0')}`,
      address: `${['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '武汉'][Math.floor(Math.random() * 8)]}市${Math.floor(Math.random() * 10) + 1}区`,
      status: status
    })
  }
  
  return testData
}

// 测试数据
const testData = ref(generateTestData())

// 处理数据更新事件
const handleDataUpdate = (newData) => {
  console.log('数据已更新:', newData)
}

// 组件挂载时的处理
onMounted(() => {
  console.log('测试数据:', testData.value)
})
</script>

<style scoped>

</style>